<template>
  <div>
    <!--    在模板中直接写 不用this -->
    <h1>计算总和:{{ sum }}</h1>
    <h3>计算总和放大10倍:{{ bigNum }}</h3>
    <h3>我在{{ school }}学{{ subject }}</h3>
    <h3 style="color: red">person组件的人数{{persons.length}}</h3>
    <!--    用number标记为数字类型  -->
    <select v-model.number="n">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
    </select>
    <button @click="ADD(n)">+</button>
    <button @click="SUB(n)">-</button>
    <button @click="addOdd(n)">总和为奇数时+1</button>
    <button @click="addWait(n)">过一会在加</button>
  </div>
</template>

<script>
//导入mapState和mapGetters
import {mapState, mapGetters, mapActions, mapMutations} from 'vuex'

export default {
  name: "my-calculate",
  data() {
    return {
      n: 1
    }
  },
  computed: {
    //借助mapState生成计算属性，(对象方法) 注意:这里的值必须用引号
    // ...mapState({school:'school',sum:'sum',subject:'subject'}),
    // 借助mapState生成计算属性，(数组方法 ) 注意:这里的值必须用引号 并且值和键值一样的情况下使用
    ...mapState('calculateAbout',['school', 'sum', 'subject']),
    ...mapState('personAbout',['persons']),

    // 利用mapGetters生成计算属性 参数和mapState的要求一样
    // ...mapGetters({bigNum:'bigNum'}),
    ...mapGetters('calculateAbout',['bigNum']),

  },
  methods: {
    // add() {
    //   // 直接在store调用mutations中的方法 因为该方法没有逻辑 只是简单的加减
    //   this.$store.commit('ADD',this.n);
    // },
    // sub() {
    //   // 直接在store调用mutations中的方法 因为该方法没有逻辑 只是简单的加减
    //   this.$store.commit('SUB',this.n);
    // },

    //使用mapMutations来生成方法 联系mutations操作数据 注意:要在模板中传入参数 调用的参数中不支持传入参数 传入参数的语法和mapState的规则一样
    ...mapMutations('calculateAbout',['ADD', 'SUB']),

    // addOdd() {
    //   //在这里调用dispatch中的方法 因为该方法有逻辑
    //   this.$store.dispatch('addOdd',this.n);
    // },
    // addWait() {
    //   //在这里调用dispatch中的方法 因为该方法有逻辑
    //  this.$store.dispatch('addWait',this.n);
    // }

    //使用mapActions来生成方法 联系actions操作数据 注意:要在模板中传入参数 调用的参数中不支持传入参数 传入参数的语法和mapState的规则一样
    ...mapActions('calculateAbout',['addOdd', 'addWait'])

  }
}
</script>

<style scoped>
button {
  margin-right: 5px;
}
</style>